<template>
	<view class="result-custom-page" :class="[isA ? 'style-a-page' : 'style-b-page']"
		:style="{backgroundImage:'url('+staticImgs.topBg+')'}" v-if="isLoadOk">
		<view class="base-info-wrapper">
			<view class="num-box">测评报告编号：{{ report.serialNumber }}</view>
			<view class="name-box">
				{{report.name}}
			</view>
			<view class="conclusion-box">
				<view class="tit">{{report.conclusion}}</view>
				<view class="label">
					报告结果
				</view>
				<view class="time">测评时间：{{scl.dateTime}}</view>
			</view>
		</view>
		<view class="data-conclusion-box">
			<view class="label-wrapper">
				<view class="text col-1">维 度</view>
				<view class="text col-2">我的指标</view>
				<view class="text col-3">健康指标</view>
			</view>

			<view class="data-wrapper">
				<view :class="[index === 0 ? 'head-row' : 'row']" v-for="(item,index) in report.scoreArr" :key="index"
					v-if="isShowZb(index)">
					<view class="col-1">
						<text class="text">{{item.label}}</text>
						<template v-if="index != 0">
							<text class="colon">:</text>
						</template>
					</view>
					<view class="col-2">
						<text class="num" v-show="item.score">{{item.score}}</text>
					</view>
					<view class="col-3">{{item.str}}</view>
					<view class="col-4">
						{{'<'+item.commonInfo}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="report && report.existDetails" class="checkup-info-box">
			<view class="checkup-info-box-inner">
				<view class="tit-img-box">
					<image class="img" :src="staticImgs.checkupTit" mode=""></image>
				</view>
				<view class="info-text">
					<text :style="{color:item.fontColor}" v-for="(item,index) in report.existDetails" :key="index">
						{{item.text}}
					</text>
				</view>
			</view>
			<view class="to-checkup-btn" @click="toCheckup">
				<image class="img" :src="staticImgs.toCheckup" mode=""></image>
			</view>
		</view> -->


		<!-- <view class="dashed-line"></view> -->
		<view class="radar-box" v-if="isSclAllReport!='N'">
			<BlockTit tit="多维雷达图" />
			<view class="radar-canvas" v-show="showCanvas">
				<CommonChart type="radar" :chartData="RadarModel" background="none" canvasId="school_b"
					:animation="false" :canvas2d="isCanvas2d" :opts="{
             dataLabel:true,
             fontColor:'#333',
             fontSize:14,
             legend:{
               show:false
             },
             extra:{
               radar:{
                 
                 radius:100,
                 labelShow:true,
                 border:true,
                 gridCount:4,
                 axisLabel:false,
                 max:50,
               }
             },
           }" :resshow="delayload" />
			</view>
		</view>


		<template v-if="report.normComparison&&isSclAllReport!='N'">
			<view class="dashed-line"></view>
			<view class="norm-comparison-box">
				<BlockTit tit="常模对比" />

				<view class="tit">{{report.normComparison.tit}}</view>
				<view class="legend-wrapper">
					<view class="legend">
						<image :src="report.normComparison.img" mode=""></image>
					</view>

					<view class="annotation-wrapper">
						<view class="annotation-box">
							<view class="icon" style="background: #A09FF2;"></view>
							<view class="text">问题严重</view>
						</view>
						<view class="annotation-box">
							<view class="icon" style="background: #9CB9FB;"></view>
							<view class="text">亚健康状态</view>
						</view>
						<view class="annotation-box">
							<view class="icon" style="background: linear-gradient(180deg, #FFC48B 0%, #FF9868 100%);">
							</view>
							<view class="text">存在健康问题</view>
						</view>
						<view class="annotation-box">
							<view class="icon" style="background: #718BE4;"></view>
							<view class="text">十分健康</view>
						</view>
					</view>

				</view>
			</view>
		</template>

		<template v-if="report.detailedResults">
			<view class="dashed-line"></view>
			<view class="detailed-results-box" :style="{marginTop: isSclAllReport == 'N' ? '50rpx' : undefined}">
				<BlockTit tit="结果介绍" v-if="isSclAllReport != 'N'" />
				<view class="summary-wrapper">
					<!-- <view class="tit">{{report.detailedResults.tit}}</view> -->
					<view class="p">{{report.detailedResults.p}}</view>
				</view>
				<view v-if="isSclAllReport!='N'">
					<template v-for="(item,index) in report.detailedResults.contentArr">
						<view class="block">
							<view class="sub-tit">{{item.tit}}</view>
							<view class="p">{{item.p}}</view>
							<!-- {{JSON.stringify(item.suggestions)}} -->
						</view>

						<view class="sub-suggestion-block" v-if="item.suggestions">
							<view class="dashed-line"></view>
							<view class="img">
								<image :src="staticImgs.resultImg2" mode=""></image>
							</view>
							<view class="bg-tit">针对性小建议</view>
							<view class="arr-tit">{{item.suggestions.tit}}</view>
							<view class="arr-p">{{item.suggestions.p}}</view>
							<view v-for="(subItem,index) in item.suggestions.contentArr">
								<!-- {{JSON.stringify(subItem)}} ==== -->
								<view class="sub-arr-tit">{{subItem.tit}}</view>
								<view class="sub-arr-p">{{subItem.p}}</view>
								<template v-if="subItem.contentArr">

									<view class="son-block" v-for="(sonItem,sonIndex) in subItem.contentArr">
										<view class="son-arr-tit"> (<text class="son-index">{{sonIndex+1}}</text>)
											{{sonItem.tit}}
										</view>
										<view class="son-arr-p">{{sonItem.p}}</view>
										<view class="dashed-line"></view>
									</view>
								</template>
								<view class="dashed-line" v-else></view>
							</view>
						</view>
						<view class="dashed-line" v-else></view>
					</template>
				</view>


			</view>
		</template>

		<template v-if="report.sciencePopularization&&isSclAllReport!='N'">
			<view class="science-popularization-box">
				<BlockTit tit="知识科普" />
				<view class="summary-wrapper">
					<view class="img">
						<image :src="staticImgs.resultImg1" mode=""></image>
					</view>
					<view class="tit" v-if="report.sciencePopularization.tit">
						{{report.sciencePopularization.tit}}
					</view>
				</view>
				<template v-for="(item,index) in report.sciencePopularization.contentArr">
					<view class="block">
						<view class="sub-tit" v-if="item.tit">{{item.tit}}</view>
						<view class="p" v-if="item.p">
							{{item.p}}
						</view>
						<view class="text-list" v-else-if="item.list">
							<view class="li" v-for="(subItem,subIndex) in item.list" :key="subIndex">{{subItem}}
							</view>
						</view>
					</view>

				</template>
			</view>
			<view class="dashed-line"></view>
		</template>

		<slot name="special" />
		<view class="references-box" v-if="referenceList.length">
			<view class="tit">参考文献</view>
			<view class="text-list">
				<view class="text" v-for="(text,index) in referenceList" :key="index">
					[{{index+1}}]{{text}}
				</view>
			</view>
		</view>

		<view class="report-time-box">
			<view>此测评报告仅供参考</view>
			<view>报告时间：{{scl.dateTime}}</view>
		</view>
	</view>
	</view>
</template>

<script>
	import BlockTit from '@/subcontractorB/components/BlockTit.vue'
	import CommonChart from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'

	var _self;
	var canvasObj = {};
	export default {
		components: {
			BlockTit,
			CommonChart
		},
		props: {
			pageData: {
				type: Object,
				default: null
			},
			isA: {
				type: Boolean,
				default: false,
			},
			showCanvas: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isSclAllReport: 'Y',
				staticImgs: {
					topBg: this.imgBaseURL + '/scl/scl_result_custom_bg.png',
					resultImg1: this.imgBaseURL + '/scl/scl_result_info.png',
					resultImg2: this.imgBaseURL + '/scl/scl_result_suggestion.png',
					checkupTit: this.imgBaseURL + '/scl/checkup-mental/checkup-tit.png',
					toCheckup: this.imgBaseURL + '/scl/checkup-mental/to-checkup-btn.png',
				},
				referenceList: [
					"钱铭怡. (主编). (2006).变态心理学(pp. 135–163). 北京大学出版社.",
					"Goldney, R. D., Fisher, L. J., Dal Grande, E., & Taylor, A. W. (2004). Subsyndromal depression:prevalence, use of health services and quality of life in an Australian population. Social Psychiatryand Psychiatric Epidemiology, 39(4)",
					"Graber,J. A.(2013). Internalizing problems during adolescence. In M. Richard,L. S. Lerner(Eds.),Handbook of Adolescent Psychology,Second Edition. John Wiley&Sons Inc.",
					"傅小兰、张侃.中国国民心理健康发展报告（2021—2022）[M].北京：社会科学文献出版社，2023:76-77.",
					"王振,苑成梅,黄佳,李则挚,陈珏,张海音... & 肖泽萍.(2011).贝克抑郁量表第2版中文版在抑郁症患者中的信效度. 中国心理卫生杂志(06),476-480. doi:CNKI:SUN:ZXWS.0.2011-06-023.",
					"American Art Therapy Association. 1996, Mission statement. Mundelein, IL: Author.",
					"王晓歌，刘吉文，杨帅，等.运动对慢性不可预测轻度应激模型鼠抑郁样行为的干预作用：系统综述和Meta分析[J].中国组织工程研究，2023,27(05):813~820.",
					"牛娟,刘明矾,周丽 & 杜泽楷.(2023).抑郁症患者情绪表象的特征及其机制. 中国临床心理学杂志(04),792-796+791. doi:10.16128/j.cnki.1005-3611.2023.04.006.",
					"Huang Y,Wang Y,Wang H,et al.Prevalence of mental disorders in China:A cross-sectional epidemiological study.The Lancet Psychiatry,2019,6(3):211-224"
				],
				cWidth: '',
				report: {
					id: '288748989898966',
					name: '《全维度身⼼测评》',
					conclusion: '重度抑郁',
					createTime: '2023-11-22',
					scoreArr: [{
							label: '抑郁程度',
							score: 66,
							str: '重度抑郁',
							commonInfo: '≤13分'
						},
						{
							label: '去躯体化',
							score: 40,
							str: '牛逼',
							commonInfo: '≤13分'
						}
					],
					normComparison: {
						tit: '这是一段废话',
						img: this.imgBaseURL + '/scl/scl_result_custom_bg.png'
					},
					detailedResults: {
						tit: '重度抑郁（29~63分）',
						p: '在最近这一段时间内，你的抑郁情况非常严重，必须尽快与专业人员进行沟通并采取相应措施。',
						contentArr: [{
							tit: '「在情绪方面」',
							p: '你总是会感到心情压抑、郁闷、沮丧，情绪低下、心境恶劣；仿佛对很多事情都丧失了兴趣；常常感到疲惫无力，对前途悲观失望；精神创伤常盘踞在脑中，以致精神不振，脑力迟钝，为此感到羞愧。'
						}]
					},
				},
				isLoadOk: false,
				scl: {
					dateTime: '2023-10-03 23:00'
				},
				delayload: false, //延时加载图表，否则会出现图表加载完后定位错乱
				RadarModel: {
					"categories": ["躯体化", "强迫症状", "人际敏感", "抑郁", "焦虑", "敌对", "恐怖", "偏执", "精神病性"],
					"series": [{
							"name": "常模",
							"color": "#FEB069",
							"data": [90, 10, 5, 35, 27, 42, 90, 80, 35],
							"index": 0,
							"pointShape": "square",
							// "labelText":'190,210,105,35,27,102,190,210,105',
							"show": true,
							"labelShow": false,
							"textColor": "rgba(0,0,0,0)",
							"type": "radar"
						},
						{
							"name": "雷达图",
							"color": "#6B77FF",
							"data": [90, 10, 85, 95, 87, 72, 90, 10, 65],
							"index": 0,
							"pointShape": "square",
							"show": true,
							"type": "radar",
							"labelShow": true,
							// show:true
						},
					]
				},
			}
		},
		watch: {
			pageData: {
				handler(v) {
					console.log(v, '======pageDataBBBBBB')
					if (v) {
						this.isSclAllReport = v.detailInfo.isSclAllReport || 'Y'
						this.report = v
						this.scl.dateTime = v.sclTime
						this.referenceList = v.literatrue
						this.RadarModel = v.radarData
						this.isLoadOk = true

						// _self = this;

						if (this.report?.existDetails?.length > 0) {
							console.log(this.report?.existDetails, '------this.report?.existDetails')

							if (this.report.existDetails.length > 1) {
								const tmpArr = this.report.existDetails[0].split('{}')
								const tmpArr2 = tmpArr.map(item => {
									return {
										text: item,
										fontColor: 'rgba(51, 51, 51, 1)'
									}
								})
								// 将this.report.existDetails[1],插入到tmpArr2的第二个位置
								tmpArr2.splice(1, 0, {
									text: this.report.existDetails[1],
									fontColor: 'rgba(254, 156, 134, 1)'
								})
								this.report.existDetails = tmpArr2

								console.log(this.report.existDetails)

							} else {
								this.report.existDetails = this.report.existDetails.map(item => {
									return {
										text: item,
										fontColor: 'rgba(51, 51, 51, 1)'
									}
								})
							}
						}

						uni.getSystemInfo({
							success: function(res) {
								if (res.pixelRatio > 1) {
									//正常这里给2就行，如果pixelRatio=3性能会降低一点
									//_self.pixelRatio =res.pixelRatio;
									// _self.pixelRatio = 2;
								}
							}
						})

						this.getData()
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			isShowZb(index) {
				if (this.isSclAllReport == 'N') {
					if (index > 0) {
						return false
					}
				}
				return true
			},
			toCheckup() {
				uni.redirectTo({
					url: '/subcontractorC/pages/sclCheckup/sclCheckup?sourceType=20'
				})
			},
			async getData() {
				uni.showLoading();
				await setTimeout(() => {
					this.delayload = true;
					uni.hideLoading();
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
		word-break: break-all;
	}

	$main-color-a: #58B938;
	$main-color-b: #747DE6;

	.style-a-page {
		.bg-tit {
			background: $main-color-a;

			&::after {
				border: 1rpx solid $main-color-a;
			}

			&::before {
				border: 1rpx solid $main-color-a;
			}
		}

	}

	.style-b-page {
		.bg-tit {
			background: $main-color-b;

			&::after {
				border: 1rpx solid $main-color-b;
			}

			&::before {
				border: 1rpx solid $main-color-b;
			}
		}
	}


	.result-custom-page {

		box-sizing: border-box;
		width: 100vw;
		min-height: 100vh;
		position: relative;
		background-size: 750rpx 1310rpx;
		background-repeat: no-repeat;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);


		.base-info-wrapper {
			margin: auto;
			padding: 90rpx 28rpx 80rpx 28rpx;

			.num-box {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 300;
				color: #666666;
			}

			.name-box {
				margin: auto;
				margin-top: 12rpx;
				// width: 696rpx;
				width: 100%;
				height: 120rpx;
				// background: #FFFFFF;
				box-shadow: 0rpx 12rpx 20rpx 0rpx #EEF4FF;
				border-radius: 12rpx;
				// opacity: 0.6;
				background-color: rgba(255, 255, 255, .6);
				border: 3rpx solid #AAC4F9;

				line-height: 120rpx;
				text-align: center;

				font-size: 40rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				color: #1A1B1F;
			}

			.conclusion-box {
				margin-top: 100rpx;
				display: flex;
				align-items: center;
				flex-direction: column;

				.tit {

					font-size: 50rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #185199;
				}

				.label {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					color: #333333;

					position: relative;

					&::after {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						right: -29rpx;
						position: absolute;
					}

					&::before {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						left: -29rpx;
						position: absolute;
					}
				}

				//.label - end

				.time {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					color: #666666;
				}
			}
		}

		// ..base-info-wrapper - end
		.data-conclusion-box {
			width: fit-content;
			margin: auto;



			.label-wrapper {
				display: flex;
				width: 700rpx;
				margin: auto;
				border-bottom: 4rpx solid #333;
				padding-bottom: 16rpx;


				.text {
					font-size: 30rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					color: #333333;
				}

				.col-1 {
					width: 46%;
					padding-left: 30rpx;
				}

				.col-2 {
					width: 30%;
				}

				.col-3 {
					// width: 24%;
					padding-right: 24rpx;
				}

			}

			.data-wrapper {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-bottom: 64rpx;
				width: 710rpx;
				margin-top: 16rpx;
				// border: 1rpx solid #C1C1C1;
				box-shadow: 0px 0px 0px 0.5px #c1c1c1;
				padding-bottom: 1rpx;

				.head-row {
					display: flex;
					align-items: center;
					width: 100%;
					height: 96rpx !important;
					background: rgba(211, 224, 255, .32);

					.col-1 {
						// width: 36%;
						width: 30%;
						padding-left: 30rpx;

						.text {
							font-size: 36rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #393C5A;
						}

						.colon {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #393C5A;
						}
					}

					.col-2 {
						width: 16%;

						.num {
							font-size: 46rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #6B77FF;
						}
					}

					.col-3 {
						width: 28%;

						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #EE5757;
						margin-left: 4rpx;
					}

					.col-4 {
						width: 24%;
						padding-right: 24rpx;
						padding-right: 54rpx;
						text-align: right;

						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #393C5A;
						margin-left: 20rpx;
					}

				}

				.row {
					display: flex;
					align-items: center;
					width: 100%;
					height: 78rpx;

					.col-1 {
						width: 32%;
						padding-left: 30rpx;

						.text {
							// font-size: 36rpx;
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #393C5A;
						}

						.colon {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #393C5A;
						}
					}

					.col-2 {
						width: 16%;

						.num {
							// font-size: 46rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #6B77FF;
							font-size: 32rpx;
						}
					}

					.col-3 {
						width: 28%;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						margin-left: 4rpx;
						font-size: 24rpx;
						color: #333333;
					}

					.col-4 {
						width: 24%;
						padding-right: 24rpx;
						padding-right: 54rpx;
						text-align: right;

						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #393C5A;
						margin-left: 20rpx;
					}

				}


			}




		}

		// .data-conclusion-box - end


		.dashed-line {
			margin: auto;
			width: 694rpx;
			height: 2rpx;

			background-image: repeating-linear-gradient(to right,
					#A9C4F2,
					#A9C4F2 10rpx,
					transparent 10rpx,
					transparent 20rpx);
		}

		// .dashed-line - end

		.checkup-info-box {
			margin: auto;
			margin-top: 104rpx;
			margin-bottom: 80rpx;

			.checkup-info-box-inner {
				// rgba(179, 212, 255, 1)
				width: 710rpx;
				box-sizing: border-box;
				padding: 84rpx 30rpx 18rpx 30rpx;
				position: relative;

				background: linear-gradient(180deg, rgba(223, 236, 255, 0.33) 0%, #FFFFFF 40%, #C6DDFF 100%);
				box-shadow: inset 0rpx 1rpx 20rpx 0rpx #B3D4FF;
				border-radius: 22rpx;

				margin: auto;

				.tit-img-box {
					position: absolute;
					top: -48rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 432rpx;
					height: 130rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.info-text {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 62rpx;
					text-indent: 2rem;
					font-style: normal;
				}

			}

			.to-checkup-btn {
				width: 338rpx;
				height: 98rpx;

				margin: auto;
				margin-top: 30rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.norm-comparison-box {
			// margin: auto;
			margin-top: 70rpx;
			margin-bottom: 70rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.tit {
				margin: auto;
				margin-top: 60rpx;
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.legend-wrapper {
				.legend {
					margin: auto;
					margin-top: 80rpx;

					&,
					image {
						width: 472rpx;
						height: 472rpx;
						// background-color: #185199;
					}
				}

				.annotation-wrapper {
					margin-top: 60rpx;

					display: flex;
					align-items: center;
					padding: 0 40rpx;
					justify-content: space-between;

					.annotation-box {
						display: flex;
						align-items: center;

						.icon {
							width: 16rpx;
							height: 16rpx;
							// background: #A09FF2;
							border-radius: 11rpx;
							margin-right: 6rpx;
						}

						.text {
							font-size: 24rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}

			//.legend-wrapper - end


		}

		// .norm-comparison-box - end

		.detailed-results-box {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.summary-wrapper {
				.tit {}
			}


			.sub-suggestion-block {
				// padding-top: 100rpx;
				padding-top: 60rpx;
				width: 680rpx;
				margin: auto;

				.img {
					margin: auto;
					margin-top: 80rpx;
					margin-bottom: 52rpx;

					&,
					image {
						width: 568rpx;
						height: 248rpx;
						// background-color: #185199;
					}
				}

				.bg-tit {

					height: 58rpx;
					// background: $main-color;//#747DE6;
					line-height: 58rpx;
					padding: 0 38rpx;
					position: relative;
					width: fit-content;
					margin: 18rpx auto;
					margin-bottom: 70rpx;


					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						right: -30rpx;
						top: -16rpx;
						bottom: 0;
						// border: 1rpx solid $main-color;//#747DE6;
					}

					&::before {
						content: '';
						position: absolute;
						right: 0;
						left: -30rpx;
						bottom: -16rpx;
						top: 0;
						// border: 1rpx solid $main-color;//#747DE6;
					}
				}

				// .tit - end


				.arr-tit {}

				.arr-p {
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					text-align: justify;
					color: #333333;
				}


				.sub-arr-tit {
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #000000;
					margin-bottom: 24rpx;
					margin-top: 70rpx;
				}

				.sub-arr-p {
					text-indent: 1.5em;
					text-align: justify;
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					color: #333333;
					margin-bottom: 40rpx;
				}

				.son-block {
					.son-arr-tit {
						margin-top: 70rpx;
						margin-left: 24rpx;
						font-size: 34rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-bottom: 24rpx;

						.son-index {
							display: inline-block;
							width: 24rpx;
							text-align: center;
						}
					}

					.son-arr-p {
						text-indent: 1.5em;
						font-size: 32rpx;
						font-family: PingFang-SC, PingFang-SC;
						// font-weight: 500;
						color: #333333;
						margin-bottom: 40rpx;
					}
				}
			}


		}

		// .detailed-results-box - end

		.radar-box {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 70rpx 0;

			.radar-canvas {
				margin-top: 70rpx;
			}
		}

		.science-popularization-box {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.summary-wrapper {
				.img {
					margin: auto;
					margin-bottom: 52rpx;

					&,
					image {
						width: 568rpx;
						height: 248rpx;
						// background-color: #185199;
					}
				}

				.p {
					margin-top: 70rpx;
				}

				.tit {}
			}

		}

		// .science-popularization-box - end

		.suggestions-box {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.summary-wrapper {
				.img {
					margin: auto;
					margin-bottom: 70rpx;

					&,
					image {
						width: 558rpx;
						height: 276rpx;
						background-color: #185199;
					}
				}

				.tit {}
			}
		}

		// .suggestions-box - end

		.references-box {
			margin-top: 70rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.tit {
				margin-left: 36rpx;
				width: fit-content;
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #195199;
				padding-bottom: 6rpx;
				border-bottom: 2rpx solid rgba(25, 81, 153, .3);
			}

			.text-list {
				margin: auto;
				margin-top: 18rpx;
				width: 675rpx;
				// height: 1416rpx;
				border: 1rpx solid #C1C1C1;
				padding: 14rpx 18rpx;

				.text {
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					color: #666666;
					line-height: 46rpx;
					text-indent: 1.5em;
				}
			}
		}

		// .references-box -end
		.report-time-box {
			margin: auto;
			margin-top: 32rpx;
			width: 709rpx;
			border-top: 4rpx solid #666;
			padding-top: 16rpx;
			padding-bottom: 50rpx;
			padding-left: 14rpx;
			padding-right: 14rpx;
			display: flex;
			justify-content: space-between;

			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 300;
			color: #666666;

		}




		.p {

			font-size: 32rpx;
			font-family: PingFang-SC, PingFang-SC;
			// font-weight: 500;
			color: #333333;
			line-height: 62rpx;
			text-indent: 1.5em;
			text-align: justify;

		}

		.summary-wrapper {
			padding: 0 40rpx;
			margin-top: 50rpx;
			margin-bottom: 30rpx;

			.tit {
				margin: auto;
				text-align: center;
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #185199;
				margin-bottom: 50rpx;

			}
		}

		.block {
			padding: 0 40rpx;
			margin-bottom: 40rpx;

			.sub-tit {
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #195199;
				margin-bottom: 18rpx;
				margin-top: 70rpx;
				// margin-left: -24rpx;
			}

			.text-list {
				display: flex;
				flex-direction: column;
				row-gap: 16rpx;

				.li {
					width: 694rpx;

					// width: 592rpx;
					height: 75rpx;
					line-height: 75rpx;
					background-image: linear-gradient(270deg, rgba(238, 238, 238, 0) 0%, rgba(245, 249, 255, 0.4) 53%, #D8E9FF 100%);
					background-size: 592rpx 75rpx;
					background-repeat: no-repeat;
					border-radius: 2rpx;
					// opacity: 0.43;

					font-size: 34rpx;
					font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					color: #333333;

					padding-left: 20rpx;
				}
			}
		}

	}
</style>